<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      margin-top: 10px;
    }

    textarea {
      resize: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- <p>
      <label for="uname">用户名: </label><input type="text" id="uname">
    </p>
    <p>
      <label for="pwd">密码: </label><input type="password" id="pwd">
    </p>
    <p>
      <label for="sex">性别: </label><select name="sex" id="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </p>
    <p>
      <label for="hobby">爱好: </label> <input type="checkbox" name="" id="">篮球<input type="checkbox" name="" id="">足球
      <input type="checkbox" name="" id="">羽毛球<input type="checkbox" name="" id="">乒乓球
    </p>
    <p>
      <label for="hun">是否已婚: </label><input type="radio" name="hun">已婚<input type="radio" name="hun">未婚
    </p>
    <p>
      <label for="pwd">简介: </label><textarea name="" id="" cols="30" rows="10"></textarea>
    </p> -->
  </div>


  <script>
    var arr = [{

        label: "用户名",

        name: "username",

        type: "text"

      }, {

        label: "密码",

        name: "password",

        type: "password"

      }, {

        label: "性别",

        name: "gender",

        type: "select",

        value: ['男', '女', '不男', '不女', 'Gay', '妖王']

      }, {

        label: "爱好",

        name: "hobby",

        type: "checkbox",

        value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

      }, {

        label: '是否已婚',

        name: 'married',

        type: 'radio',

        value: ['已婚', '未婚']

      },
      {

        label: '简介',

        name: 'resume',

        type: 'textarea'

      }
    ];

    let box = document.querySelector(".box")
    render(arr)

    //根据数据，渲染为表单
    function render(arr) {
      arr.forEach(function (items, i) {
        if (items.type === 'text') {
          box.innerHTML += `
          <p>
      <label for="uname">${items.label}: </label><input type="${items.type}" id="uname" value="${items.name}">
    </p>
`
        } else if (items.type === 'password') {
          box.innerHTML += `
          <p>
            <label for="pwd">${items.label}: </label><input type="${items.type}" id="pwd" value="${items.name}">
          </p>
        `
        } else if (items.type === 'select') {
          box.innerHTML += `
          <p>
            <label for="sex">${items.label}: </label>
            <select name="" id="sex" type="${items.type}">
              <option value="男">${items.value[0]}</option>
              <option value="男">${items.value[1]}</option>
              <option value="男">${items.value[2]}</option>
              <option value="男">${items.value[3]}</option>
              <option value="男">${items.value[4]}</option>
              <option value="男">${items.value[5]}</option>
            </select>
          </p>
        `
        } else if (items.type === 'checkbox') {
          box.innerHTML += `
        <p>
            <label for="hobby">${items.label}: </label> 
            <input type="${items.type}" name="" id="">${items.value[0]}
            <input type="${items.type}" name="" id="">${items.value[1]}
            <input type="${items.type}" name="" id="">${items.value[2]}
          </p>
`
        } else if (items.type === 'radio') {
          box.innerHTML += `
          <label for="hun">${items.label}: </label><input type="${items.type}" name="hun">${items.value[0]}
          <input type="${items.type}" name="hun">${items.value[1]}
          `
        } else if (items.type === 'textarea') {
          box.innerHTML += `<br/>
          <label for="pwd">${items.label}: </label><textarea name="" id="" cols="30" rows="10">${items.name}</textarea>
          `
        }
      })
    }
  </script>
</body>

<!-- <input type="${items.type}" name="" id="">${items.value[0]}
<input type="${items.type}" name="" id="">${items.value[1]}
<input type="${items.type}" name="" id="">${items.value[2]} -->

</html>